<template>
  <div class="community">
    <CommonHeader />
    <CommonNav :navData="navArr" :filtData="filtArr" />
    <CommonList :listData="commonListData"/>
    <router-view />
  </div>
</template>

<script>
import CommonHeader from '@/components/CommonHeader'
import CommonNav from '@/components/CommonNav'
import CommonList from '@/components/CommonList'

export default {
  name:'Community',
  components:{
    CommonNav,
    CommonHeader,
    CommonList
  },
  data(){
    return{
      commonListData:[],
      active:0,
      navArr:[
        {
          title:"社区",
          path:'/community'
        },
        {
          title:"乐章",
          path:'/song'
        },
        {
          title:"听说",
          path:'/listen'
        },
        {
          title:"聊聊",
          path:'/chat'
        },
        {
          title:"乐趣",
          path:'/interest'
        },
        {
          title:"游记",
          path:'/travel'
        },
        {
          title:"摄影",
          path:'photo'
        },
        {
          title:"蓝莓酱",
          path:"/blueberrypai"
        },
        {
          title:"社区",
          path:"/community"
        }
      ],
      filtArr:[
        {
          title:"有声读物",
          value:0
        },
        {
          title:"评论最多",
          value:1
        },
        {
          title:"收藏排名",
          value:2
        },
        {
          title:"点赞排名",
          value:3
        },
        {
          title:"人气排行",
          value:4
        },
        {
          title:"热门推荐",
          value:5
        }
      ]
    }
  },
  mounted(){
    this.$axios.get(this.HOST + "/api/community")
    .then(res => {
      this.commonListData = res.data.listening;
    })
    .catch(error => {
      console.log(error);
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.community{
  background: #f5f5f5;
}
</style>
